<template>
	<view class="box">
		<!-- 背景图 -->
		<view class="bg f-w">
			<image src="https://jw.xzsw2021.com/static/big/bj02@2x.png" mode=""></image>
		</view>
		<!--  -->
		<view class="content">
			<!-- 顶部 -->
			<view class="top f-w" >
				<view class="tl" @click="goDuihuan">
					<view>兑换</view>
					<view>积分</view>
				</view>
				<view class="timg f-w">
					<image src="https://jw.xzsw2021.com/static/big/bj01@2x.png" mode=""></image>
				</view>
				<view class="t-r" @click="goGuize">
					<view>活动</view>
					<view>规则</view>
				</view>
			</view>
			<!-- 进度条 -->
			<view class="process">
				<view class="desc">集满<text class="c1">{{target.sum}}</text>食材就能做成满汉全席</view>
				<view class="process2" style="margin-top: 80rpx;">
					<u-line-progress :percentage="(target.banquet_sum/target.sum)*100" activeColor="#FFFFFF"
						inactiveColor="#933A05" height="10">
					</u-line-progress>
					<!-- 数字盒子 -->
					<view class="num fw-bt">
						<view>0</view>
						<view>{{target.sum}}</view>
						<view class="num2" :style="'left:'+left+'%;top:-80rpx'">{{target.banquet_sum}}</view>
					</view>
				</view>
			</view>
			<!-- 问卷表 -->
			<view class="list">
				
				<view class="demo flex">
					<view class="dimg">
						<image src="../../../static/img/qinadoaimg.png" mode=""></image>
					</view>
					<view class="dr fw-bt">
						<view>
							<view class="f28 bold">签到得积分
							 </view>
							<view class="f24 c999" >每天登录<text class="lv">签到得积分</text></view>
						</view>
						<view class="dbtn dbtn3" v-if="isqiandao">已签到</view>
							<view class="dbtn" v-else  @click="sign">去签到</view>
					</view>
				</view>
				
				
				
				<view class="demo flex" v-for="(item,index) of task" :key="index">
					<view class="dimg">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="dr fw-bt">
						<view>
							<view class="f28 bold">{{item.title}} 
							 <block v-if="item.task_num>1">
								 ({{item.complete+'/'+item.task_num}})
								 
							 </block>
							 </view>
							<view class="f24 c999" ><text class="lv">{{item.description}}</text></view>
						</view>
						<view class="dbtn dbtn3" v-if="item.is_complete!=0">已完成</view>
							<view class="dbtn" v-else @click="gourl(item.url)">去完成</view>
						<!-- 满足条件 -->
					</view>
				</view>
			</view>
			<!-- 底部 -->
			<!-- <view class="bottom"></view> -->
		</view>
		<!-- 兑换弹窗 -->
		<uni-popup ref="popup" type="center">
			<view class="pop">
				<view class="pimg1 f-w">
					<image src="https://jw.xzsw2021.com/static/big/icon_245@2x.png" mode=""></image>
					<view>{{target.product.store_name}}</view>
				</view>
				<view class="pimg2 f-w">
					<image src="https://jw.xzsw2021.com/static/user/icon_246@2x.png" mode=""></image>
					<view class="bold" @click="goDuihuan2()">立即兑换</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
		       isqiandao:null,
				num: 500, //已获得积分
				// left:50,//偏移度。
				target: '',
				task: []
			}
		},
		mounted() {
			// this.$refs.popup.open()
		},
		computed: {
			left() {
				let num=(this.target.banquet_sum / this.target.sum) * 100
				   num=num>100?100:num
				
				return num
			}
		},
		onShow() {
			this.getinfo()
			this.checkqd()
		},
		methods: {
			checkqd(){
				this.$request("user/banquet/lst", {}, 'GET').then(res => {
					this.target = res.data.target
					this.task = res.data.task
					if (res.data.target.status == '0') {
						if (res.data.target.banquet_sum >= res.data.target.sum){
							this.$refs.popup.open()
						}
					}
				
				})
			},
			sign(){
				this.$request("user/sign/create", {}, 'POST').then(res => {
				    this.getinfo()
				
				})
			},
			getinfo() {
				this.$request("user/sign/signInfo", {}, 'GET').then(res => {
                            this.isqiandao=res.data.is_sign

				})

			},

			// 轮播图跳转
			gourl(e) {
			let url =`/${e}`
				if (url == '/pages/index/index' ||  url.includes('pages/goods/goods')|| url == '/pages/state/state' || url == '/pages/cart/cart' || url ==
					'/pages/live/live' || url == '/pages/user/user') {
					uni.switchTab({
						url
					})
				} else {
					uni.navigateTo({
						url
					})
				}
			},
			
			// 去兑换-积分
			goDuihuan() {
				uni.navigateTo({
					url: '/pages/user/plus/integral/integral?type=2'
				})
			},
			// 任务完成-兑换商品
			goDuihuan2() {
				this.$refs.popup.close()
				uni.navigateTo({
					url: '/pages/client/address-choose/address-choose?type=manhan&product_id='+this.target.product.product_id+'&activeid='+
					this.target.id+'&unique='+this.target.product.attrValue[0].unique
				})
			},
			// 活动规则
			goGuize() {
				uni.navigateTo({
					url: '/pages/xieyi/xieyi?type=10'
				})
			},
			// 去签到、
			goCaozuo(index) {
				if (index === 0) { //签到
					console.log('签到');
					this.$showToast('签到成功')
					this.list[0].is_done2 = true;
				} else if (index === 1) { //浏览商品
					console.log('浏览商品');
					uni.navigateTo({
						url: '/pages/user/banquest/browse/browse'
					})

				}
				if (index === 2) {
					console.log('分享商品');
					uni.navigateTo({
						url: '/pages/client/find/find?type=2'
					})

				}
				if (index === 3) {
					console.log('评价');
					uni.navigateTo({
						url: '/pages/client/order/order?type=4&orign=manhan'
					})

				}
				if (index === 4) {
					console.log('关注店铺');
					uni.navigateTo({
						url: '/pages/client/shop-list/shop-list?orign=manhan'
					})

				}
				if (index === 5) {
					console.log('回答问卷');
					uni.navigateTo({
						url: '/pages/user/banquest/questionnaire/questionnaire'
					})

				}
				if (index === 6) {
					console.log('加味回答');
					uni.navigateTo({
						url: '/pages/user/banquest/wenda/wenda'
					})

				}
				if (index === 7) {
					console.log('收藏商品');
					uni.navigateTo({
						url: '/pages/client/find/find?type=3'
					})
				}

			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 750rpx;
			height: 890rpx;
			background-color: rgb(233, 64, 85);

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			position: relative;
			z-index: 3;
		}

		.top {
			margin-top: 30rpx;
			align-items: flex-start;
			justify-content: space-between;

			.tl,
			.t-r {
				width: 114rpx;
				height: 54rpx;
				// line-height: 54rpx;
				text-align: center;
				font-size: 20rpx;
				color: #fff;
				background: linear-gradient(93deg, #C63B18 0%, rgba(198, 59, 24, 0) 100%);
				border-radius: 0rpx 27rpx 27rpx 0rpx;

			}

			.timg {
				width: 400rpx;
				height: 98rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.tl {
				&>view {
					margin-right: 10rpx;
				}
			}

			.t-r {
				background: linear-gradient(263deg, #C63B18 0%, rgba(198, 59, 24, 0) 100%);
				border-radius: 27rpx 0 0 27rpx;

				&>view {
					margin-left: 10rpx;
				}
			}
		}

		.c1 {
			margin: 0 5rpx;
			color: #FBF759;
			font-size: 60rpx;
			font-weight: bold;
		}

		// 进度条
		.process {
			position: absolute;
			top: 140rpx;
			left: 30rpx;
			width: 690rpx;
			height: 200rpx;
			// background-color: #fff;
			text-align: center;

			.desc {
				font-size: 36rpx;
				font-weight: 400;
				color: rgb(254, 239, 202);
				line-height: 40rpx;
				vertical-align: baseline;
				text-shadow: 0rpx 3rpx 0rpx rgba(160, 52, 3, 0.4);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}

			.process2 {
				margin: 46rpx auto 0;
				width: 630rpx;
				// height: 20rpx;
				border-radius: 10rpx;

				.num {
					position: relative;
					margin-top: 20rpx;
					width: 630rpx;
					height: 30rpx;
					font-size: 28rpx;
					color: #fff;

					.num2 {
						position: absolute;
						top: 0;
						left: 10%;
						transform: translateX(-50%);
						height: 30rpx;
						line-height: 30rpx;
					}
				}
			}
		}

		// 问卷表
		.list {
			position: relative;
			margin: 700rpx auto 0;
			width: 690rpx;
			padding-bottom: 65rpx;
			// height: 1334rpx;
			background: #FFFFFF;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			z-index: 20;

			.demo {
				padding: 0 30rpx;

				.dimg {
					margin-top: 40rpx;
					width: 92rpx;
					height: 92rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.dr {
					position: relative;
					flex: 1;
					padding: 50rpx 0 40rpx;
					margin-left: 15rpx;
					border-bottom: 1rpx solid #eee;

					.f24 {
						margin-top: 16rpx;
					}

					.lv {
						margin-left: 10rpx;
						color: #109C7A;
					}

					.ds {
						position: absolute;
						width: 152rpx;
						top: 14rpx;
						right: 0;
						font-weight: bold;
						text-align: center;
						font-size: 26rpx;
						color: #F83535;

					}
				}

				.dbtn {
					width: 152rpx;
					height: 64rpx;
					line-height: 64rpx;
					text-align: center;
					color: #fff;
					font-size: 26rpx;
					background: linear-gradient(64deg, #07C752, #61E505);
					border-radius: 32rpx;
				}

				.dbtn2 {
					background: linear-gradient(64deg, #FABA55, #FE9C02);
				}

				.dbtn3 {
					background: #d6d8dd;
				}
			}
		}

		.bottom {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 750rpx;
			height: 300rpx;
			background-color: pink;
			z-index: 1;
		}

		// 兑换弹窗
		.pop {
			width: 526rpx;
			text-align: center;

			.pimg1 {
				position: relative;
				width: 526rpx;
				height: 350rpx;

				&>view {
					margin-top: -30rpx;
					width: 526rpx;
					position: relative;
					color: #fff;
					font-size: 50rpx;
				}

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 526rpx;
					height: 350rpx;
				}
			}

			.pimg2 {
				position: relative;
				margin: -100rpx auto;
				width: 412rpx;
				height: 112rpx;

				&>view {
					width: 412rpx;
					position: relative;
					color: #BA3E18;
					font-size: 56rpx;

				}

				image {
					position: absolute;
					left: 0;
					top: 0;
					width: 412rpx;
					height: 112rpx;
				}
			}
		}
	}
</style>
